<template>
    <a-layout id="components-layout-demo-custom-trigger">
        <a-layout-sider :trigger="null" :style="{ height: '100vh' }">
            <div class="logo"></div>
            <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
                <a-menu-item key="1">
                    <span>任务清单</span>
                </a-menu-item>
                <a-menu-item key="2">
                    <span>待定选项</span>
                </a-menu-item>
                <a-menu-item key="3">
                    <span>待定选线</span>
                </a-menu-item>
            </a-menu>
        </a-layout-sider>
        <a-layout>
            <!-- content -->
            <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff' }">
                <template>
                    <a-form layout="inline" :form="form">
                        <a-form-item>
                            <a-input placeholder="workType" v-model="form.mainType">
                            </a-input>
                        </a-form-item>

                        <a-form-item>
                            <a-input placeholder="workDetail" v-model="form.workDetail">
                            </a-input>
                        </a-form-item>

                        <a-form-item>
                            <a-button type="primary" :disabled="addValidate()" @click="handleSubmit">
                                添加任务
                            </a-button>
                        </a-form-item>
                    </a-form>
                </template>
                <br>
                <template>
                    <workList :listItem="listItem" :listTitle="listTitle" />
                </template>
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>
<script>
import workList from "@/components/list/workList/index.vue"
import { getAction, postAction } from '@/utils/axios/index.js'


export default {
    components: {
        workList
    },
    data() {
        return {
            listItem: [],
            listTitle: {
                mainType: {
                    title: "任务",
                    itemClass: "item",
                    type: "function",
                    function: function (value) {
                        return value || "";
                    }
                },
                workDetail: {
                    title: "详情",
                    itemClass: "longItem",
                    type: "normal",
                    function: function (value) {
                        return value
                    }
                },
                startTime: {
                    title: "开始时间",
                    itemClass: "item",
                    type: "time",
                    function: function (value) {
                        let time = new Date(value);
                        return `${time.getFullYear()}/${time.getMonth() + 1}/${time.getDate()}`
                    }
                },
                endTime: {
                    title: "结束时间",
                    itemClass: "item",
                    type: "time",
                    function: function (value) {
                        if (value == "") {
                            return ""
                        }
                        let time = new Date(value);
                        return `${time.getFullYear()}/${time.getMonth() + 1}/${time.getDate()}`
                    }
                },
                statu: {// 0 未完成   1 已完成  2 被删除
                    title: "statu",
                    itemClass: "shortItem",
                    type: "function",
                    function: function (value) {
                        if (value == 0) {
                            return "未完成"
                        } else if (value == 1) {
                            return "已完成"
                        } else {
                            return "被删除"
                        }
                    }
                }
            },
            form: {
                workDetail: "",
                mainType:""
            }
        };
    },
    computed: {

    },
    methods: {
        // 获取任务列表
        async initState() {
            await getAction("http://localhost:8083/mainPage").then(res => {
                this.listItem = res.data.listItem
                this.listItem = this.listItem.sort(function(objA, objB) {
                    return objA.statu !== 0 ? 1 : -1;
                })
            })
        },
        addValidate() {
            return this.form.mainType== ""
        },
        async handleSubmit() {
            //添加任务，{startTime}
            let mainType = this.form.mainType
            let workDetail = this.form.workDetail
            let time = new Date()

            let workMsg = {
                mainType,
                workDetail,
                startTime: time.getTime(),
                endTime: "",
                statu: 0
            }
            await postAction("http://localhost:8083/mainPage/addWork", workMsg)
            this.listItem.unshift(workMsg);
            this.form.workDetail = ""
            this.form.mainType =""
        }
    },
    beforeMount() {
        this.initState();
    }
};
</script>
<style>
#components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;

}

#components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
    height: 32px;
    margin: 16px;
}
</style>
